﻿@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <title>AjaxFileUploader</title>
    <link href="/Scripts/AjaxFileUploaderV2.1/ajaxfileupload.css" rel="stylesheet" />
    <script src="/Scripts/jquery-1.8.2.js"></script>
    <script src="/Scripts/AjaxFileUploaderV2.1/ajaxfileupload.js"></script>
</head>
<body>
    <div>
        <form id="form1" runat="server">
            <div>
                <input id="imgFile" type="file" size="45" name="imgFile" class="input" />
                <button id="buttonUpload" onclick="return ajaxFileUpload();">
                    上传</button>

                <img id="loading" src="/Scripts/AjaxFileUploaderV2.1/loading.gif" style="display: none;" />
                <div id="imgshow" style="display: none;">
                </div>
            </div>
        </form>
        <script type="text/javascript">
            function ajaxFileUpload() {
                $("#loading").ajaxStart(function () {
                    $(this).show();
                }).ajaxComplete(function () {
                    $(this).hide();
                });

                $.ajaxFileUpload(
                {
                    url: '/File/Upload',
                    secureuri: false,
                    fileElementId: 'imgFile',
                    dataType: 'json',
                    data: { dir: 'image', localUrl: '' },
                    success: function (data, status) {
                        if (typeof (data.error) !== 'undefined') {
                            if (data.error !== '') {
                                alert(data.error);
                            } else {
                                // alert(data.msg);
                                $('#imgshow').show();
                                $('#imgshow').append("<img src='/Temp/" + data.msg + "'  width='100' height='60' />");
                            }
                        }
                    },
                    error: function (data, status, e) {
                        alert(e);
                    }
                })

                return false;

            }
        </script>
    </div>
</body>
</html>
